<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server" >
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>学生通行码</title>
  <link href="../static/css/layer.css" type="text/css" rel="stylesheet" />
  <link href="../static/css/main.css?v=(20220917)" type="text/css" rel="stylesheet" />
  <script src="../static/js/layer.js" type="text/javascript"></script>
  <script src="../static/js/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript" defer>
    let _data = {"Hs":[{"Prm1":"2022-09-14 21:06:17","Prm2":"阴性","Prm3":null,"Prm4":null}]
      ,"Ym":[{"Prm1":"2022-02-18","Prm2":"第3针","Prm3":null,"Prm4":null}
        ,{"Prm1":"2021-08-04","Prm2":"第2针","Prm3":null,"Prm4":null}
        ,{"Prm1":"2021-06-29","Prm2":"第1针","Prm3":null,"Prm4":null}]
      ,"Jkm":[{"Prm1":jkmTime(),"Prm2":"杭州市","Prm3":"黑码","Prm4":null}]
      ,"Txm":[{"Prm1":"2022-09-01","Prm2":"2023-01-06","Prm3":"启用","Prm4":null}],"Xcm":[]};
    $(() =>{
      $("html").css("background-color", "#b8e8f9");
      getTime();
      setInterval(() => {
        getTime();
      }, 1000);
      // 定时刷新页面
      //setTimeout(()=>{
      //    location.reload();
      //},1000 * 60)

    });
    function jkmTime()
    {
      const date = new Date();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const year = date.getFullYear();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();
      if(hour.toString().length<2)
        hour = "0"+hour;
      if(minute.toString().length<2)
        minute = "0"+minute;
      if(second.toString().length<2)
        second = "0"+second;

      return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
    }
    function getTime(){
      const date = new Date();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();

      if(hour.toString().length<2)
        hour = "0"+hour;
      if(minute.toString().length<2)
        minute = "0"+minute;
      if(second.toString().length<2)
        second = "0"+second;

      $("#sj").text(month + "月" + day + "日  " + hour + ":" + minute + ":" + second);
    }
    function GetInfo(tag){
      let info = eval("_data." + tag);
      var html = "<div class='tips-info'>";
      if(tag == 'Hs'){
        html += "<div class='tips-title'><div>核酸检测时间</div><div>结果</div></div>";
      }
      if(tag == 'Ym'){
        html += "<div class='tips-title'><div>疫苗接种时间</div><div>针数</div></div>";
      }
      if(tag == 'Jkm'){
        html += "<div class='tips-title'><div>最近更新时间</div><div>码发放地</div><div>码状态</div></div>";
      }
      if (tag=='Txm') {
        html += "<div class='tips-title'><div>开始时间</div><div>结束时间</div><div>状态</div></div>";
      }
      for(let i = 0;i < info.length; i++){
        html += `<div class='tips-content'>`
                + `<div>` + info[i].Prm1 + `</div>`
                + `<div>` + info[i].Prm2 + `</div>`
                + (info[i].Prm3 == null ? `` : "<div>" + info[i].Prm3 + "</div>" )
                + `</div>`;
      }
      if (tag == 'Jkm') {
        html += '<span style="color:blue;font-size:40px;text-decoration:underline;" onclick="handle_refresh()">点击刷新健康码信息<span>';
      }
      html += "</div>"
      alertOpen(html);
    }
    let lOpen;
    //弹出内容
    function alertOpen(html){
      lOpen = layer.open({
        shadeClose: true
        ,content: html
        ,anim: 'up'
        ,style: 'position:fixed; left:3%; top:500px; width:94%; height:700px; border: none; -webkit-animation-duration: .5s; animation-duration: .5s; border-radius: 25px;'
      })
    }
    function alertTips(content){
      //提示
      layer.open({
        content: "<span style='font-size: 35px;'>" + content + "</span>"
        ,skin: 'msg'
        ,time: 2 //2秒后自动关闭
      });
    }
    //32位随机字符串
    function getGuid(){
      const oStr = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
              oChar = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ', len = oChar.length;
      return oStr.replace(/x/g, (match) => {
        return oChar.charAt(Math.floor(Math.random() * len));
      });
    }


    //同步核酸
    // <script type="text/javascript">
    function LastTime()
    {
      const date = new Date();  //获取时间对象
      const month = date.getMonth() + 1;//获取月份。获取的月份比真实的月份少一个月。所以这里得+1
      const day = date.getDate();  //获取日
      let ansmonths = "";
      let ansdays = "-";
      if(month < 10) ansmonths += "0";
      if(day < 10) ansdays += "0";
      $("#hs-sj").text(ansmonths + month + ansdays + day + " 01:13");
    }
    setInterval("LastTime()", 1000);  //设置每隔1秒调用一下上面的方法

    //获取验证码
    function getCode(){
      let sjh = $('.layui-m-layercont').find("input[name='sjh']").eq(0).val();
      if(!isPhoneNum(sjh)){
        alertTips("请输入正确的手机号码！！");
        return;
      }
      let queryId = getGuid();
      $("#queryId").val(queryId);
      let sendTime = "2022-09-17 11:30:14";
      $("#sendTime").val(sendTime);
      let timeNum = 60, setText = (start) => {
        let btn = $('.layui-m-layercont').find("span[name='btn_yzm']").eq(0);
        btn.html(start ? timeNum : --timeNum);
        btn.addClass("disabled2");

        if (timeNum <= 0) {
          clearInterval(this.timer);
          btn.removeClass("disabled2");
          btn.html("重新获取");
        };
      };
      setText(!0);
      this.timer = setInterval(setText, 1000);

      let loadingOpen;
      $.ajax({
        url: "/AdultPass/GetVerification",
        type: "POST",
        data: {
          sjh: sjh,
          queryId: queryId,
          sendTime: sendTime
        },
        beforeSend: () => {
          loadingOpen = layer.open({type: 2});
        },
        success: (ret, status) => {
          layer.close(loadingOpen);
          if (status == "success" && ret && ret.code == '00') {
            try{
              let datas = JSON.parse(ret.datas);
              if(datas && datas.code == 200){
                if(datas.data && datas.data.code == '00' && datas.data.result){
                  alertTips(datas.data.result);
                }else{
                  alertTips(datas.data.errorDesc);
                }
              }
              else{
                alertTips("短信发送失败！");
              }
            }catch(e){
              alertTips("短信发送失败！");
            }
          }
          else {
            alertTips("短信发送失败！");
          }
        },
        error: function (obj) {
          layer.close(loadingOpen);
          alertTips("短信发送失败！");
        },
        dataType: "json",
        async: true
      });
    }
    function getXcm(){
      let sjh = $('.layui-m-layercont').find("input[name='sjh']").eq(0).val();

      if(!isPhoneNum(sjh)){
        alertTips("请输入正确的手机号码！！");
        return;
      }

    }
    //授权
    function isCheck(e){
      if(e.checked){
        $('.layui-m-layercont').find(".hy-cx").eq(0).removeClass("disabled1");
      }else{
        $('.layui-m-layercont').find(".hy-cx").eq(0).addClass("disabled1");
      }
    }
    //手机号码 正则
    function isPhoneNum(phone){
      const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
      return reg.test(phone);
    }
    //刷新健康码
    function refreshJkm() {
      $.ajax({
        url: "/TchPassCode/RefreshJkm",
        type: "POST",
        success: function (msgBody) {
          var data = $.parseJSON(msgBody);
          if (data.Code == 1) {
            alertTips(data.Message);
            setTimeout(() => { location.reload() }, 500);
          }
          else {
            alertTips(data.Message);
          }
        }
      })
    }
    const handle_refresh = debounce(() => {
      refreshJkm();
    }, 1000);
    /*
     * fn [function] 需要防抖的函数
     * delay [number] 毫秒，防抖期限值
     */
    function debounce(fn, delay) {
      let timer = null; //借助闭包
      return function () {
        if (timer) {
          clearTimeout(timer); //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
          timer = setTimeout(fn, delay);
        } else {
          timer = setTimeout(fn, delay); // 进入该分支说明当前并没有在计时，那么就开始一个计时
        }
      };
    }

  </script>
</head>
<body>
<div style="width: 100%;">
  <!-- 个人信息 -->
  <div class="top-body">
    <div class="top-info" style="background: url('../static/img/card.png') no-repeat; background-size: 100%; background-position: center;">
      <div class="top-banner">
        <img src='../static/img/schoolname.png'><br />
      </div>
      <div class="top-xm">
        {{ name }}
        &nbsp;&nbsp;<span>{{ id }}</span>
      </div>
      <div class="top-xgh">
        学工号：{{ id_no }}
      </div>
      <div class="top-dw">
        学院/班级：{{ school }}
      </div>
      <div class="top-dw" onclick="GetInfo('Txm')">
        通行时间：<span style="text-decoration: underline">{{ begin_time }}&#x81F3;{{ end_time }}</span>
      </div>
    </div>
  </div>
  <!-- 中间内容 -->
  <div class="mid-info">
    <div class="mid-time" onclick="window.location.reload();">
      <span id="rq"></span>
      <span id="sj" style="background: url('../static/img/refresh.png') no-repeat; background-size: 55px; background-position: right;padding:0 70px 0 70px; "></span>
    </div>
    <!-- 二维码 -->
    <div class="mid-ewm">
        <img id="ewm" src="../static/img/BlackQrcode.png" alt="二维码">
    </div>
    <div class="mid-yqsj">
      <div class="mid-jkm">
        <span>杭州健康码为<span style="color: black; font-size: 40px; text-decoration:underline;" onclick="GetInfo('Jkm')">黑色</span></span>
      </div>
      <div class="mid-ym">
        <span>已完成<span class="ym-span" onclick="GetInfo('Ym')">&#x7B2C;{{ vaccine_num }}&#x9488;</span>疫苗接种</span>
      </div>
    </div>
    <div class="mid-msg" style="background-color: rgb(153 239 125 / 20%)">
      <span>&#x606D;&#x559C;&#x60A8;&#xFF0C;&#x4E00;&#x5207;&#x6B63;&#x5E38;~</span>
    </div>
  </div>
  <!-- 中间内容区域 -->
  <div class="bottom-info">
    <div class="bottom-left">
      <!-- 核酸 -->
      <div class="bottom-hs" style="background: url('../static/img/hs-green.png') no-repeat; background-size: 300px;">
           <div class="hs-sj" id="hs-sj">
           </div>
        <div class="hs-jg" style="display: flex; align-items: center; flex-direction: row; justify-content: center; align-content: center;">
          <div style="font-size:130px;margin-right:5px">1</div>
          <div style="display: flex; align-items: flex-start; flex-direction: column">
            <div style="display:flex">&#x5929;&#x5185;</div>
            <div style="font-size: 50px;">&#x9634;&#x6027;</div>
          </div>
        </div>
        <div class="hs-mc">核酸检测<img src="../static/img/edit.png"  alt="edit"/></div>
      </div>
    </div>
    <div class="bottom-right">
      <!-- 行程码 -->
      <div class="bottom-xcm">
        <div class="xcm-top">
          <div class="xcm-top-img">
            <img src="../static/img/isgo.png" />
          </div>
          <div class="xcm-top-content">
            <div class="xcm-title">疫情重点地区核验</div>
            <div class="xcm-tips">近14天行程核验</div>
          </div>
        </div>
        <div id="xcm-hy">
          <div class="xcm-ljhq" onclick='alertOpen($("#yqfk-hy").html())'>立即获取</div>
        </div>
      </div>
    </div>
  </div>
  <!-- 疫情防控地区核验 -->
  <div hidden="hidden" id='yqfk-hy'>
    <div class="yqfk-hy">
      <div class='hy-mc'>疫情重点地区核验</div>
      <div class='hy-sjh'><img src="../static/img/mobile.png" /><input type="text" name='sjh' placeholder="手机号码" /></div>
      <div class='hy-yzm'><img src="../static/img/mobile-yz.png" /><input type="text" name='yzm' placeholder="短信验证码" /><span onclick="getCode()" name="btn_yzm">获取验证码</span></div>
      <div class='hy-qr' onclick='$(event.target).children(0).click();'><input type="checkbox" onclick='isCheck(this)' value="同意并授权运营商查询本人疫情数据" />同意并授权运营商查询本人通信行程卡数据</div>
      <div class='hy-cx disabled1' onclick="window.open('RealPassCode2Tmp.html', '_self')">查询</div>
    </div>
  </div>
  <!-- 行程码短信验证传值 -->
  <div hidden="hidden">
    <div id='queryId'></div>
    <div id='sendTime'></div>
  </div>
</div>
</body>
</html>